<template>
  <div class="aCon">
    <openlayers-map class="mainM" v-if="levelSwitch === '1'"></openlayers-map>
    <openlayers-map-two class="mainM" v-if="levelSwitch === '2'"></openlayers-map-two>
    <openlayers-map-three class="mainM" v-if="levelSwitch === '3'"></openlayers-map-three>
    <openlayers-map-four class="mainM" v-if="levelSwitch === '4'"></openlayers-map-four>
    <openlayers-map-five class="mainM" v-if="levelSwitch === '5'"></openlayers-map-five>
    <div class="contS">
      <!-- 左侧 -->
      <div class="a1 zf" :class="{ 'hidden': $store.state.switch.isHidden }" @mouseover="showImage = true"
        @mouseleave="showImage = false">
        <div class="a1MainCont">
          <left-detail-list-cloud v-if="levelSwitch === '1'"></left-detail-list-cloud>
          <left-detail-list-physics v-else-if="levelSwitch === '2'"></left-detail-list-physics>
          <left-detail-list-network v-else-if="levelSwitch === '3'"></left-detail-list-network>
          <left-detail-list-apply v-else-if="levelSwitch === '4'"></left-detail-list-apply>
          <left-detail-list-society v-else-if="levelSwitch === '5'"></left-detail-list-society>
        </div>
        <div class="midC">
          <div class="content">
            <img src="@/assets/img/left.png" @click="toggleVisibility" v-if="!$store.state.switch.isHidden"
              v-show="showImage">
            <img src="@/assets/img/right.png" @click="toggleVisibility" v-else>
          </div>
        </div>
      </div>

      <!-- 右侧详情一 -->
      <div class="a2" v-if="showDetail === true">
        <dv-border-box-13>
          <right-detail-all></right-detail-all>
        </dv-border-box-13>
      </div>

      <!-- 右侧详情二 -->
      <div class="a2" v-if="levelSwitch === '5' && showDetailTwo === true">
        <dv-border-box-10>
          <right-detail-all-two></right-detail-all-two>
        </dv-border-box-10>
      </div>

      <div class="tuliOne" v-if="levelSwitch === '4' && showDetail !== true">
        <div class="tuContainer">
          <div class="cirC"></div>
          <div class="content">数据中心</div>
        </div>
      </div>
    </div>
    <div class="tuliOne" v-if="levelSwitch === '1' && showDetail !== true">
      <div class="tuContainer">
        <div class="cirC"></div>
        <div class="content">数据中心</div>
      </div>
    </div>

    <div class="tuliTwo" v-if="levelSwitch === '2' && showDetail !== true">
      <div class="tuContainer">
        <div class="tItem">
          <div class="cirD"></div>
          <div class="content">光缆段</div>
        </div>
        <div class="tItem">
          <div class="cirC"></div>
          <div class="content">数据中心</div>
        </div>
        <div class="tItem">
          <div class="cirG"></div>
          <div class="content">着陆点</div>
        </div>
        <div class="tItem">
          <div class="cirP"></div>
          <div class="content">POP</div>
        </div>
      </div>
    </div>

    <div class="tuliThree"
      v-if="levelSwitch === '3' && showDetail !== true && $store.state.switch.levelSwitchOfNet === 1">
      <div class="tuContainer">
        <div class="tItem">
          <div class="cirC"></div>
          <div class="content">数据中心</div>
        </div>
        <div class="tItem">
          <div class="cirG"></div>
          <div class="content">asn点</div>
        </div>
        <div class="tItem">
          <div class="cirP"></div>
          <div class="content">重要asn点</div>
        </div>
      </div>
    </div>

    <div class="tuliThreeOfTwo"
      v-if="levelSwitch === '3' && showDetail !== true && $store.state.switch.levelSwitchOfNet === 2">
      <div class="tuContainer">
        <div class="tItem">
          <div class="cirC"></div>
          <div class="content">数据中心</div>
        </div>
      </div>
    </div>

    <div class="tuliOne" v-if="levelSwitch === '5' && showDetailTwo !== true">
      <div class="tuContainer">
        <div class="cirZ"></div>
        <div class="content">重点目标</div>
      </div>
    </div>

  </div>
</template>

<script>
import LeftDetailListCloud from './component/leftDetailList-cloud/index.vue';
import LeftDetailListPhysics from './component/leftDetailList-physics/index.vue';
import LeftDetailListNetwork from './component/leftDetailList-network/index.vue';
import LeftDetailListApply from './component/leftDetailList-apply/index.vue';
import LeftDetailListSociety from './component/leftDetailList-society/index.vue';
import RightDetailAll from './component/rightDetailAll/rightDetailAll.vue';
import RightDetailAllTwo from './component/rightDetailAllTwo/rightDetailAllTwo.vue';
import OpenlayersMap from './component/mapControl/mapOne/openlayersMap.vue';
import OpenlayersMapTwo from './component/mapControl/mapTwo/openlayersMapTwo.vue';
import OpenlayersMapThree from './component/mapControl/mapThree/index.vue';
import OpenlayersMapFour from './component/mapControl/mapFour/openlayersMapFour.vue';
import OpenlayersMapFive from './component/mapControl/mapFive/openlayersMapFive.vue';
import { mapState } from 'vuex';

export default {
  components: {
    OpenlayersMap,
    OpenlayersMapTwo,
    OpenlayersMapThree,
    OpenlayersMapFour,
    OpenlayersMapFive,
    RightDetailAll,
    LeftDetailListCloud,
    LeftDetailListPhysics,
    LeftDetailListNetwork,
    LeftDetailListApply,
    LeftDetailListSociety,
    RightDetailAllTwo,

  },
  data() {
    return {
      showRdetail: true,
      showRdetailTwo: false,
      isHidden: false,
      showImage: false
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
    // console.log(this.$store.state.switch.isHidden,'levelSwitch');
    this.$store.state.switch.levelSwitch = this.$route.query.flag ? this.$route.query.flag : "1"
  },
  computed: {
    ...mapState('switch', ['levelSwitch', 'showDetail', 'showDetailTwo'])
  },

  methods: {
    toggleVisibility() {
      this.$store.state.switch.isHidden = !this.$store.state.switch.isHidden;
    }
  },
};
</script>
<style lang="scss" scoped>
.aCon {
  width: 100%;
  height: 100%;
  position: relative;


  .mainM {
    position: absolute;
  }

  @keyframes pulse {
    0% {
      border-color: #4a90e2;
      transform: scale(1);
    }

    50% {
      border-color: #357ebd;
      transform: scale(1.05);
    }

    100% {
      border-color: #4a90e2;
      transform: scale(1);
    }
  }

  .tuliOne {
    width: 155px;
    height: 55px;
    position: absolute;
    right: 30px;
    bottom: 100px;
    border: 2px solid #5577D0;
    border-radius: 2px;
    animation: pulse 2s infinite;
    user-select: none;
    font-size: 17px;

    .tuContainer {
      display: flex;
      padding: 16px 20px;

    .cirC {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-right: 8px;
      background-color: #00B0FF;
    }

    .cirZ {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-right: 8px;
      background-color: #6159ff;
    }

      .content {
        vertical-align: bottom;
        margin-top: 1.5px;
      }
    }
  }

  .tuliTwo {
    width: 155px;
    height: 145px;
    position: absolute;
    right: 30px;
    flex-direction: column;
    bottom: 100px;
    border: 2px solid #5577D0;
    border-radius: 2px;
    animation: pulse 2s infinite;
    user-select: none;
    font-size: 17px;
    padding-top: 20px;
    padding-left: 20px;

    .tuContainer {
      height: 100%;
      display: flex;
      flex-direction: column;

      .tItem {
        flex: 1;
        display: flex;

        // 光缆段
        .cirD {
          width: 20px;
          height: 0;
          margin-right: 8px;
          margin-top: 10px;
          border-radius: 5px;
          border-top: 5px solid #8BC341;
        }

        .cirC,
        .cirP,
        .cirG {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          margin-right: 8px;
        }

        .cirC {
          background-color: #00B0FF;
        }

        .cirP {
          background-color: #5470c6;
        }

        .cirG {
          background-color: pink;
        }


        .content {
          margin-top: 1.5px;
        }
      }
    }
  }

  .tuliThree {
    width: 155px;
    height: 120px;
    position: absolute;
    right: 30px;
    flex-direction: column;
    bottom: 100px;
    border: 2px solid #5577D0;
    border-radius: 2px;
    animation: pulse 2s infinite;
    user-select: none;
    font-size: 17px;
    padding-top: 20px;
    padding-left: 20px;

    .tuContainer {
      height: 100%;
      display: flex;
      flex-direction: column;

      .tItem {
        flex: 1;
        display: flex;

        .cirC,
        .cirP,
        .cirG {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          margin-right: 8px;
        }

        .cirC {
          background-color: #00B0FF;
        }

        .cirP {
          background-color: red;
        }

        .cirG {
          background-color: pink;
        }


        .content {
          margin-top: 1.5px;
        }
      }
    }
  }

  .tuliThreeOfTwo {
    width: 155px;
    height: 35px;
    position: absolute;
    right: 30px;
    flex-direction: column;
    bottom: 100px;
    border: 2px solid #5577D0;
    border-radius: 2px;
    animation: pulse 2s infinite;
    user-select: none;
    font-size: 17px;
    padding-top: 10px;
    padding-left: 20px;

    .tuContainer {
      height: 100%;
      display: flex;
      flex-direction: column;

      .tItem {
        flex: 1;
        display: flex;

        .cirC,
        .cirP,
        .cirG {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          margin-right: 8px;
        }

        .cirC {
          background-color: #00B0FF;
        }

        .cirP {
          background-color: red;
        }

        .cirG {
          background-color: pink;
        }


        .content {
          margin-top: 1.5px;
        }
      }
    }
  }

  .contS {
    display: flex;

    .zf {
      transition: all 0.3s;
    }

    .hidden {
      transition: all 0.3s;
      transform: translateX(-465px);
    }


    .a1 {
      display: flex;
      .a1MainCont {
        background-color: rgba(0, 25, 46, 0.9);
        z-index: 1;
      }

      .midC {
        width: 50px;
        height: 95%;
        margin-left: 5px;

        z-index: 1;
        display: flex;
        align-items: center;

        .content {
          width: 40px;
          user-select: none;

          img {
            cursor: pointer;
            width: 35px;
            height: 35px;
          }
        }
      }
    }

    .a2 {
      position: absolute;
      right: 0;
      margin-top: 10px;
      width: 450px;
      background-color: rgba(0, 25, 46, 0.9);
      /* 使用 rgba 函数设置透明背景 */
      border-bottom-left-radius: 35px;
    }
  }
}
</style>
